<template>
  <div class="psiter">
    <div class="image_tofile" ref="imageTofile">
        <!-- 这里放需要截图的元素,自定义组件元素也可以 -->
        <div class="total"><img src="/static/img/positer.png"></div>
        <div class="qs_code"><img :src="qrs_code+ '?time=' + new Date().valueOf()" crossOrigin="anonymous"></div>
        <div class="qs_eng" v-text="sp_code"></div>
    </div>
 <!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl" class="ocn">

  </div>    
</template>
<script>
// 引入html2canvas
import html2canvas from 'html2canvas'
export default{
  name: 'come',
  data(){
    return {
      htmlUrl: '',
      ctem:false,
      detail:"",
      token:"",
      qrs_code:"",
      sp_code:"",
    }
  },
  created(){
    if (localStorage.token) {
        this.token=localStorage.getItem('token');
    }
this.$axios.get("/v1/common/redPacketDetail",{
        headers:{
              'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
              'Authorization': "bearer "+this.token
          }
        }).then(res => {
          var result = res.data;
            this.detail=result.data;
            this.qrs_code=result.data.prize_h5.qr_code;
            this.sp_code=result.data.prize_h5.spread_code;
          if (result.code == 200) {
            this.detail = result.data;
          } else {
            Toast(result.msg);
          }
        });

      // this.$axios.get("/v1/common/getUserQrcode",{
      //   params:{
      //         'user_id':27,
      //     }
      //   }).then(res => {
      //     var result = res.data;
      //       console.log(result);
      //     if (result.code == 200) {
      //       this.detail = result.data;
      //       this.qrs_code='http://xunjiangzhimei.oss-cn-hangzhou.aliyuncs.com/upload/image/20190830/38c57d68d8d582d13641bc8d5f13f43e.png';
      //       this.sp_code='UADJDA'
      //     } else {
      //       Toast(result.msg);
      //     }
      //   });

  },
  mounted () {
  // 如果页面一加载就需要生成图片,就在mounted里调用方法,给一个setTimeout,保证页面元素已存在
  setTimeout(this.toImage, 500)

},
  // 注册组件
  components: {
    html2canvas
  },
  methods: {

  // 页面元素转图片
    toImage () {
//       // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
//       html2canvas(this.$refs.imageTofile, {
//         backgroundColor: null,
// 　　　　 useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题

//       }).then((canvas) => {
//         let url = canvas.toDataURL('image/png')
//         this.htmlUrl = url

//       })
 html2canvas(this.$refs.imageTofile, {
        backgroundColor: null,
　　　　 useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题

      }).then((canvas) => {
        let url = canvas.toDataURL('image/png')
        this.htmlUrl = url
        // 把生成的base64位图片上传到服务器,生成在线图片地址

      })
    },

    },
};
</script>
<style scoped>
.image_tofile{
  width: 487px;
  height:703px;
  margin:0 auto; 
  position: relative;
  z-index:-1;
}
.total{
  width: 100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
}
.total img{width:100%;}
.qs_code{width:88px;height:88px;position:absolute;top:368px;left:200px;}
.qs_code img{width:100%;}
.qs_eng{font-size:16px;color:#FFE416;width:52px;position:absolute;top:480px;left:240px;}
.f-full{width:680px;}
.ocn{width:487px;}
</style>